
<template>
  <div id="container" class="box">
    <div id="cesiumContainer"></div>
  </div>
</template>
<script>
export default {
  name: "cesiumPage",
  data() {
    return {};
  },
  mounted() {
    var Cesium = this.Cesium;
    //   var cesiumContainer = document.getElementById("cesiumContainer");
    //   var viewer = new Cesium.Viewer("cesiumContainer",{
    //     //加载在线谷歌地图
    //     imageryProvider: new Cesium.UrlTemplateImageryProvider({
    //        url:"http://www.google.cn/maps/vt?lyrs=s&x={x}&y={y}&z={z}"
    //     })
    //   })
    //     //去除 版权图标
    //     viewer._cesiumWidget._creditContainer.style.display="none";
    // }
    // 官网更新token数据，解决在线加载地球401的问题
    Cesium.Ion.defaultAccessToken =
      "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJiNGE1ZTg3OS1mYjQzLTQyNzAtODE0Yi1lNWU0NGY0MzliNzIiLCJpZCI6NzA3MzksImlhdCI6MTYzNDYwNzY0NH0.t5yqSdoSrafPqq5lR4wILDvtjfWzSOa1Ybq_HA-kxhs";
    //加载天地图
    var viewer = new Cesium.Viewer("cesiumContainer", {
      animation: false, //是否显示动画控件
      baseLayerPicker: true, //是否显示图层选择控件
      geocoder: true, //是否显示地名查找控件
      timeline: false, //是否显示时间线控件
      sceneModePicker: true, //是否显示投影方式控件
      navigationHelpButton: false, //是否显示帮助信息控件
      infoBox: true, //是否显示点击要素之后显示的信息
    });
    // 配置iframe权限，由于H5限制allow-scripts
    var iframe = document.getElementsByClassName("cesium-infoBox-iframe")[0];
    iframe.setAttribute(
      "sandbox",
      "allow-same-origin allow-scripts allow-popups allow-forms"
    );
    iframe.setAttribute("src", "");
    // 天地图票据信息token
    // var tk = "b092b85627bee0355595b2efb3c3475e";
    var tk = "tk";
    //加载影像底图---天地图
    var layer = new Cesium.WebMapTileServiceImageryProvider({
      url: `http://t0.tianditu.gov.cn/img_w/wmts?tk=${tk}`,
      layer: "img",
      style: "default",
      tileMatrixSetID: "w",
      format: "tiles",
      maximumLevel: 18,
    });
    viewer.imageryLayers.addImageryProvider(layer);

    //加载影像注记
    var layermarks = new Cesium.WebMapTileServiceImageryProvider({
      url: `http://t0.tianditu.gov.cn/cia_w/wmts?tk=${tk}`,
      layer: "cia",
      style: "default",
      tileMatrixSetID: "w",
      format: "tiles",
      maximumLevel: 18,
    });
    viewer.imageryLayers.addImageryProvider(layermarks);
    //去除 版权图标
    viewer._cesiumWidget._creditContainer.style.display = "none";
    // 点击home按钮跳转到中国
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
      80,
      22,
      130,
      50
    );
  },
};
</script>
 
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html,
body,
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.box {
  height: 100%;
}
</style>

